<!-- 搜索页面的搜索框 -->
<template>
  <div class="search-box">
    <i class="icon-search"></i>
    <!-- placeholder这是input默认的属性 -->
    <input ref="query" class="box" v-model="query" :placeholder="placeholder"/>
    <!-- ""是false，所以当query有值的时候才会显示 -->
    <i @click="clear" v-show="query" class="icon-dismiss"></i>
  </div>
</template>

<script>
// 引入节流函数，减少请求的开销
import {debounce} from 'common/js/util'

export default {
  props: {
    placeholder: {
      type: String,
      default: '搜索歌曲,歌手'
    }
  },
  data () {
    return {
      query: ''
    }
  },
  methods: {
    // 清空input值
    clear () {
      this.query = ''
    },
    // 接收热门搜索点击传递来的数据
    setQuery (query) {
      // 赋值给query
      this.query = query
    },
    blur () {
      // dom的上的移开焦点的方法
      this.$refs.query.blur()
    }
  },
  created () {
    // 监听query，newQurey是query的值
    // 使用debounce自定义的节流功能的函数
    this.$watch('query', debounce((newQurey) => {
      // 派发到父组件，把写入的值告诉父组件
      this.$emit('query', newQurey)
    }, 200))
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .search-box
    display: flex
    align-items: center
    box-sizing: border-box
    width: 100%
    padding: 0 6px
    height: 40px
    background: $color-highlight-background
    border-radius: 6px
    .icon-search
      font-size: 24px
      color: $color-background
    .box
      flex: 1
      margin: 0 5px
      line-height: 18px
      background: $color-highlight-background
      color: $color-text
      font-size: $font-size-medium
      outline: 0
      &::placeholder
        color: $color-text-d
    .icon-dismiss
      font-size: 16px
      color: $color-background
</style>
